<template>
  <div class="pt-3 pb-3">
    <el-row class="items-end ">
      <el-col :span="3">
        <span class="font-bold text-xl ">手机</span>
        <span class="ml-2 text-gray-400 ">手机风暴</span>
      </el-col>
      <el-col :span="1" :offset="15">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">小米</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">荣耀</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">乐视</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">魅族</div>
      </el-col>
      <el-col :span="2">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">更多手机 ></div>
      </el-col>
    </el-row>
    <el-row class="items-center border-t-2 border-black">
      <el-col :span="4">
        <div class=" bg-green-400 flex-1 relative" style="height: 510px">
          <div class="pt-2 m-2 flex flex-wrap justify-around flex-shrink myTag">
            <div class=" mb-3 w-16 h-16 rounded-full bg-white flex justify-center items-center">十核</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">八核</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">双四核</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">十核</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">十核</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">十核</div>
          </div>
          <div class=" text-center text-white text-sm font-bold">免费领30天碎屏险</div>
          <div class=" text-center text-black text-opacity-40 text-xs">颜值之星，双摄之星</div>
          <div class=" flex justify-center absolute bottom-0 left-16">
            <img src="../assets/tel.png" width="180" height="170">
          </div>
          <div class=" absolute bottom-0 left-0 triangle"></div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="flex-col flex flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/phone1.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">荣耀8</div>
                <div class=" text-gray-400">¥5888.00</div>
              </div>
            </div>
          </div>
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/phone2.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">一加手机</div>
                <div class=" text-gray-400">¥2499.00</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="flex cursor-pointer justify-center flex-col flex-1">
          <div class=" flex">
            <div class=" ml-5">
              <div class=" font-bold text-lg">红米</div>
              <div class=" text-gray-400">￥1199.00</div>
            </div>
          </div>
          <img src="../assets/phone3.jpg" class=" duration-500 hover: transform hover:translate-x-5">

        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="cursor-pointer flex flex-col flex-1">
          <div>
            <img src="../assets/phone4.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">苹果4s手机</div>
                <div class=" text-gray-400">¥2099.00</div>
              </div>
            </div>
          </div>
          <div>
            <img src="../assets/phone5.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">LG G5</div>
                <div class=" text-gray-400">¥2999.00</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class=" flex flex-col flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">魅族 魅蓝</div>
                <div class=" text-gray-400">¥999.00</div>
              </div>
            </div>
            <img src="../assets/phone5.jpg" class=" duration-500 hover: transform hover:translate-x-10">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="pt-3 pb-3">
    <el-row class="items-end ">
      <el-col :span="3">
        <span class="font-bold text-xl ">电脑</span>
        <span class="ml-2 text-gray-400 ">新年换新机</span>
      </el-col>
      <el-col :span="1" :offset="15">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">戴尔</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">三星</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">小米</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">联想</div>
      </el-col>
      <el-col :span="2">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">更多电脑 ></div>
      </el-col>
    </el-row>
    <el-row class="items-center border-t-2 border-black">
      <el-col :span="4">
        <div class=" flex-1 relative" style="height: 510px;background-color: #ff9229">
          <div class="pt-2 m-2 flex flex-wrap justify-around flex-shrink myTag hoverTag1">
            <div class=" mb-3 w-16 h-16 rounded-full bg-white flex justify-center items-center">CPU</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">显卡</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">机箱</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">键盘</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">鼠标</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">U盘</div>
          </div>
          <div class=" text-center text-white text-sm font-bold">致敬2016</div>
          <div class=" text-center text-black text-opacity-40 text-xs">新春大礼包</div>
          <div class=" flex justify-center absolute bottom-0 left-16">
            <img src="../assets/computerArt.png" width="180" height="170">
          </div>
          <div class=" absolute bottom-0 left-0 triangle" style="border-color: #d17b28 #d17b28 #FFFFFF #FFFFFF"></div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="flex-col flex flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/computer2.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">罗技蓝牙键盘</div>
                <div class=" text-gray-400">¥179.90</div>
              </div>
            </div>
          </div>
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/computer1.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">惠普（HP）笔记本</div>
                <div class=" text-gray-400">¥4999.00</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="flex cursor-pointer justify-center flex-col flex-1">
          <div class=" flex">
            <div class=" ml-5">
              <div class=" font-bold text-lg">米奇优盘</div>
              <div class=" text-gray-400">¥39.90</div>
            </div>
          </div>
          <img src="../assets/computer3.jpg" class=" duration-500 hover: transform hover:translate-x-5">

        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="cursor-pointer flex flex-col flex-1">
          <div>
            <img src="../assets/computer5.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">联想笔记本</div>
                <div class=" text-gray-400">¥6599.00</div>
              </div>
            </div>
          </div>
          <div>
            <img src="../assets/computer4.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">优派液晶显示器</div>
                <div class=" text-gray-400">¥699.00</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class=" flex flex-col flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">LG 航拍器</div>
                <div class=" text-gray-400">¥699.00</div>
              </div>
            </div>
            <img src="../assets/computer6.jpg" class=" duration-500 hover: transform hover:translate-x-10">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="pt-3 pb-3">
    <el-row class="items-end ">
      <el-col :span="5">
        <span class="font-bold text-xl ">甜品</span>
        <span class="ml-2 text-gray-400 ">每一道甜品都有一个故事</span>
      </el-col>
      <el-col :span="1" :offset="13">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">桂花糕</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">奶皮酥</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">栗子糕</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">马卡龙</div>
      </el-col>
      <el-col :span="2">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">更多美味 ></div>
      </el-col>
    </el-row>
    <el-row class="items-center border-t-2 border-black">
      <el-col :span="4">
        <div class=" flex-1 relative" style="height: 510px;background-color: #b474fe">
          <div class="pt-2 m-2 flex flex-wrap justify-around flex-shrink myTag hoverTag2">
            <div class=" mb-3 w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
          </div>
          <div class=" text-center text-white text-sm font-bold">零食大礼包开抢</div>
          <div class=" text-center text-black text-opacity-40 text-xs">当小鱼儿恋上软豆腐</div>
          <div class=" flex justify-center absolute bottom-0 left-16">
            <img src="../assets/act1.png" width="180" height="170">
          </div>
          <div class=" absolute bottom-0 left-0 triangle" style="border-color: #594e90 #594e90 #FFFFFF #FFFFFF"></div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="flex-col flex flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/1.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">雪之恋和风大福</div>
                <div class=" text-gray-400">¥13.8</div>
              </div>
            </div>
          </div>
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/2.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="flex cursor-pointer justify-center flex-col flex-1">
          <div class=" flex">
            <div class=" ml-5">
              <div class=" font-bold text-lg">小优布丁</div>
              <div class=" text-gray-400">¥4.8</div>
            </div>
          </div>
          <img src="../assets/3.jpg" class=" duration-500 hover: transform hover:translate-x-5">

        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="cursor-pointer flex flex-col flex-1">
          <div>
            <img src="../assets/4.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
          <div>
            <img src="../assets/5.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class=" flex flex-col flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
            <img src="../assets/5.jpg" class=" duration-500 hover: transform hover:translate-x-10">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="pt-3 pb-3">
    <el-row class="items-end ">
      <el-col :span="5">
        <span class="font-bold text-xl ">坚果</span>
        <span class="ml-2 text-gray-400 ">酥酥脆脆，回味无穷</span>
      </el-col>
      <el-col :span="1" :offset="13">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">腰果</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">松子</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">碧根果</div>
      </el-col>
      <el-col :span="1">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">开心果</div>
      </el-col>
      <el-col :span="2">
        <div style="font-size: 13px" class="mr-1 cursor-pointer">更多美味 ></div>
      </el-col>
    </el-row>
    <el-row class="items-center border-t-2 border-black">
      <el-col :span="4">
        <div class=" flex-1 relative" style="height: 510px;background-color: #82ceff">
          <div class="pt-2 m-2 flex flex-wrap justify-around flex-shrink myTag hoverTag3">
            <div class=" mb-3 w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
            <div class=" mb-3  w-16 h-16 rounded-full bg-white flex justify-center items-center">核桃</div>
          </div>
          <div class=" text-center text-white text-sm font-bold">开抢啦</div>
          <div class=" text-center text-black text-opacity-40 text-xs">零食大礼包</div>
          <div class=" flex justify-center absolute bottom-0 left-16">
            <img src="../assets/act1.png" width="180" height="170">
          </div>
          <div class=" absolute bottom-0 left-0 triangle" style="border-color: #728fb9 #728fb9 #FFFFFF #FFFFFF"></div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="flex-col flex flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/7.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">雪之恋和风大福</div>
                <div class=" text-gray-400">¥13.8</div>
              </div>
            </div>
          </div>
          <div class="cursor-pointer" @click="goToDeTail">
            <img src="../assets/6.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="flex cursor-pointer justify-center flex-col flex-1">
          <div class=" flex">
            <div class=" ml-5">
              <div class=" font-bold text-lg">小优布丁</div>
              <div class=" text-gray-400">¥4.8</div>
            </div>
          </div>
          <img src="../assets/10.jpg" class=" duration-500 hover: transform hover:translate-x-5">

        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div @click="goToDeTail" class="cursor-pointer flex flex-col flex-1">
          <div>
            <img src="../assets/8.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
          <div>
            <img src="../assets/9.jpg" class=" duration-500 hover: transform hover:translate-x-10">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class=" flex flex-col flex-1">
          <div class="cursor-pointer" @click="goToDeTail">
            <div class=" flex">
              <div class=" ml-5">
                <div class=" font-bold text-lg">小优布丁</div>
                <div class=" text-gray-400">¥4.8</div>
              </div>
            </div>
            <img src="../assets/10.jpg" class=" duration-500 hover: transform hover:translate-x-10">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
const $router = useRouter();
function goToDeTail(){
  $router.push({
    name: 'detail'
  })
}
</script>
<style scoped>
.myTag > div {
  @apply text-xs cursor-pointer;
}

.myTag > div:hover {
  background-color: #72ff90;
  color: white;
}
.hoverTag2>div:hover {
  background-color: #b474fe;
}
.h-120 {
  height: inherit;
}
.hoverTag1>div:hover {
  background-color: #ff9229;
}
.hoverTag3>div:hover {
  background-color: #82ceff;
}
.triangle {
  border-width: 20px;
  border-style: solid;
  border-color: #68937f #68937f #ffffff #ffffff;
}
</style>